@charset "utf-8";
/**
* @Description:common
* @author:wangzhan 
* @Update:2015-03-08
*/
html,body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe,table,th,td{ margin:0; padding:0; }
body,input,select,button,textarea{ font-size:12px; font-family:"microsoft yahei",arial,tahoma,verdana,\5b8b\4f53,sans-serif; }
body{ line-height:1.231; -webkit-text-size-adjust:100%; }
a{ color:#000; text-decoration:none; }
h1,h2,h3,h4,h5,h6{ font-size:14px; }
img{ display:block; border:none; vertical-align:middle; }
ul,ol{ list-style-type:none; }
button,a{ cursor:pointer; }
i,em,cite,s{ font-style:normal; }
table{ border-collapse:collapse; border-spacing:0; }
textarea{ resie:none; }
a:hover{ text-decoration:none; }
.clearfix{ clear:both; }
/*	common   */
body{ position:relative; z-index:0; width:100%; }
.green-bg{ background: #67bc79; }
.white-bg{ background: #fff; }
.run-main{ position:relative; z-index:0; width:100%; height:100%; }
.btn-addgroup{ display:block; width:100%; height:36px; color:#349760; text-align:center; line-height:36px; font-size:16px; background:#fff; border-radius:30px; box-shadow:0 3px 2px #d2d2d2; }
/*	content   */
.run-hmain{ width:100%; height:auto; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_bg.jpg) no-repeat 50% 50%; -webkit-background-size:cover; background-size:cover; }
.run-head{ width:60%; padding-top:38%; margin:0 auto; text-align:center; overflow:hidden; }
.run-head i,.run-head i img{ width:80px; height:80px; -webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; }
.run-head i{ margin:0 auto; display:block; padding:2px; background:#fff; }
.run-head span{ height:30px; font-size:16px; color:#fff; line-height:30px; }
.run-add{ width:80%; margin:30px auto 0; padding-bottom:40px; overflow:hidden; }
.run-add img{ width:82%; margin:0 auto; margin-bottom:15px; }
.viewport { width:320px; margin:20px auto 0; overflow:hidden; -webkit-transform:translateZ(0); }
.run-container{ height:153px; width:1180px; /* 230px(item) * 5 + 45px(padding) */}
.run-container:after { content:''; display:block; clear:both; height:0; }
.run-fcont { position: absolute; top: 0; width: 78%; margin-left: 10%; text-align: center; overflow: hidden; }
.run-fcont p { font-size: 14px; line-height: 24px; }
.run-fcont p span { color: #ff537e; font-size: 18px; }
.run-fcont p:nth-child(1) { margin-top: 20px; }
.run-fcont:nth-child(1) p:nth-child(1) { margin-top: 16px; }
/*page 2*/
.rl-main{ background:#fff; }
.rl-head { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 190px; background: url(http://b1.hoopchina.com.cn/irun/img/group/r_hbg.jpg) no-repeat 50% 50%; -webkit-background-size: cover; background-size: cover; }
.rl-time{ margin-top: 30px; width: 100%; text-align: center; font-size: 14px; color: #fff; }
.rl-time h3{ font-weight: normal; }
.rl-time .rl-month{ padding-top: 14px; }
.rl-time h3 i { font-size:52px; padding: 0 15px; }
.rl-time p{ font-size: 12px; color: #afcbdb; }
.sel-area{ width: 290px; margin:30px auto 0; height: 52px; overflow: hidden; }
.sel-area li{ position: relative; float: right; width: 123px; height: 52px; margin-left: -38px; text-align: center; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_sprite01.png) no-repeat 0 -113px; background-size: 123px 165px; }
.sel-area li.cur{ background-position: 0 -59px; z-index: 2; }
/*icon*/
.ic-rank,.ic-record,.ic-d{ display: block; height: 20px; width: 20px; margin:10px auto 0; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_sprite01.png) -5px 0; background-size: 85px 114px; }
.ic-record{ width: 21px; background-position: -26px 0; }
.ic-rank{ width: 31px; background-position: -48px 0; }
.sel-area li span{ display: none; margin-top: 4px; }
.sel-area li.cur .ic-d{ background-position: -5px -19px; }
.sel-area li.cur .ic-record{ background-position: -26px -21px; }
.sel-area li.cur .ic-rank{ background-position: -48px -19px; }
.sel-area li.cur span{ display: block; width: 123px; color:#3bb7d9; }


/* tab card */
.rl-conts { width: 100%; overflow: hidden; margin: 190px auto 0; }
.rl-cont{ display: none; }
.contcur{ display: block;}
/*¸Å¿ö*/
.rm-ul{ margin-top: 10px; width: 89.75%; padding:0 5%; overflow: hidden; font-size: 14px; }
.rm-ul li { width: 92%; height: 30px; padding: 15px 4%; line-height: 30px; border-bottom: 1px solid #dadad8; }
.rm-ul li i { display: block; float: left; width: 52%; }
.rm-ul li span { display: block; float: right; width: 46%; text-align: right; color: #3bb7d9; font-size: 24px; }
.rm-ul li span cite, .rl-gcont p cite { font-size: 14px; }
.rl-goal{ width: 89.75%; height:36px; padding:24px 0; margin:0 auto; overflow: hidden; border-bottom:1px solid #dadad8; }
.rl-gcont{ width: 39.5%; float: left; padding:0 5%; text-align: center; }
.rl-gcont:nth-child(1){ border-right: 1px solid #dadad8; }
.rl-gcont p{ font-size: 14px; }
.rl-gcont .rl-num-blue{ font-size:24px; padding-top: 2px; color: #3bb7d9; }

/*records*/
.rk-records{ width: 100%; overflow: hidden; }
.rk-records li{ width: 89.75%; padding:15px 5% 25px; border-bottom: 1px solid #dadad8; overflow: hidden; }
.rk-records li cite{ float: right; color: #adadb3; font-size: 14px; }
.rk-m{ position: relative; float: left; width: 90px; height: 70px; }
.rk-m img{ width: 70px; height:70px; border-radius:70px; }
.rk-num{ position: absolute; left: -10px; bottom:-10px; width: 90px; height: 27px; text-align: center; color: #fff; line-height: 24px; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_sprite02.png) no-repeat 0 0; background-size: 90px 45px; }
.rk-mk{ position: relative; height: 60px; padding-left:5%; float: left; border-left:1px solid #dadad8; }
.rk-mk p{ height: 20px; font-size: 16px; }
.rk-mk p.rk-blue{ margin-top: 20px; color: #76c3eb; }

/*rank*/
.rks-header{ width: 300px; height:150px; margin:10px auto 0; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_rank.png) no-repeat center bottom; background-size: 300px 65px; }
.rks-h{ float: left; width: 86px; height: 134px; text-align: center; overflow: hidden; }
.rks-h:nth-child(1){ margin-left: 22px; }
.rks-bj,.rks-by,.rks-bt{ margin:0 auto; display: block; width: 70px; height:90px; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_g.png) no-repeat top center; background-size: 70px 89px; }
.rks-by{ margin-top: 15px; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_y.png) no-repeat top center; background-size: 70px 89px; }
.rks-bt{ margin-top: 24px; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_t.png) no-repeat top center; background-size: 70px 89px; }
.rks-h img{ position: relative; top: 23px; left: 4px; width: 62px; height: 62px; border-radius: 62px; }
.rks-h p{ font-size: 13px; height: 24px; line-height: 24px; padding: 0 5px;white-space:nowrap; overflow:hidden; 
text-overflow:ellipsis}
.rks-h:nth-child(1) p{line-height: 31px; height: 31px; }
.rks-h:nth-child(2) p{line-height: 46px; height: 46px; }
.rks-h:nth-child(3) p{line-height: 22px; height: 22px; }

.rks-cont li{ width: 91.75%; height: 62px; padding:15px 4%; border-bottom: 1px solid #cecbc7; overflow: hidden; }
.rks-cont li code{ display: block; float: left; height: 62px; width: 40px; line-height: 62px; font-size: 18px; font-weight: bold; }
.rks-img{ float: left; width: 62px; height: 62px; border-radius: 62px; }
.rks-info{ height: 62px; float: left; margin-left: 4%; }
.rks-info p{ padding-top: 4px; font-size: 15px; line-height: 20px; }
.rks-info p.rks-count{ padding-top: 0; margin-top:16px; color: #626671; }
/*records criedt*/
.rds-head{
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100%;
    height:180px;
    background: #3bb7d9;
    overflow: hidden;
}
.rds-head h3{
    padding:20px 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
}
.rds-head h3 strong{
    font-size:46px;
    font-weight: normal;
    padding:0 2%;
}
.rds-head img{
    width: 100%;
}
.rds-records{
    position: fixed;
    z-index: 2;
    top: 180px;
    width: 100%;
    box-shadow: 0 0 20px #aaa;
    background: #fff;

}
.rds-records .rl-goal{
    position: relative;
    z-index: 5;
    border-bottom: none;
}


.rds-cont{
    margin-top: 265px;
}

.rds-cont li{
    width:92.9%;
    padding:3.5%;
    height: 84px;
    border-bottom: 1px solid #dadad8;
}

.rds-lf{
    position: relative;
    float: left;
    width: 100px;
    height: 85px;
    background: #ffffff;
    border-right: 1px solid #3bb7d9;

}
.rds-lf span{
    position: absolute;
    right:42px;
    top: 30px;
    color: #fff;
    padding:2px 5px;
    border-radius: 3px;
    background: #3bb7d9;
    overflow: hidden;
}
.rds-iarea{
    float: left;
    position: relative;
    height: 85px;
    width: 38px;
    background: #fff;
}
.rds-img{
    position: absolute;
    z-index: 1;
    top:15px;
    left: -30px;
    height: 54px;
    width: 54px;
    border-radius:54px;
    overflow: hidden;

}
.rds-info{
    position: relative;
    z-index: 0;
    float: left;
    height: 70px;
}
.rds-info p{
    margin-top: 18px;
    font-size: 14px;
}
.rds-info p:nth-child(2){
    margin-top: 4px;
    color: #adadb3;
    font-size: 13px;
}
.ic-run{
    display: inline-block;
    position: relative;
    top: 2px;
    width: 14px;
    height: 17px;
    background:url(http://b1.hoopchina.com.cn/irun/img/group/r_sprite02.png) no-repeat -21px -30px;
    background-size: 100px 50px;
}
.rds-fav{
    float: right;
    width: 40px;
    height: 20px;
    margin-top: 28px;
    line-height: 20px;
}
.ic-fav,.ic-ufav{
    position: relative;
    top: 3px;
    display: inline-block;
    width: 20px;
    height: 17px;
    background:url(http://b1.hoopchina.com.cn/irun/img/group/r_sprite02.png) no-repeat -44px -38px;
    background-size: 120px 60px;
}
.ic-ufav{
    background-position: -65px -38px;

}

.r-footer { margin:40px auto 30px; height: 30px; width: 100%; line-height: 30px; text-align: center; font-size: 12px; overflow: hidden; }
.r-footer .ic-blue { color: #3bb7d9; }

/*	media style  */
@media screen and (min-width:360px) {
    .run-fcont p{ line-height: 28px; font-size: 16px; }
    .run-fcont p span{ font-size: 20px; }
    .run-fcont p:nth-child(1) { margin-top: 30px; }
    .rks-header{ width: 350px; height:160px; margin:10px auto 0; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_rank.png) no-repeat center bottom; background-size: 350px 76px; }
    .rks-h{ height: 145px; width: 100px; }
    .rks-h:nth-child(1){ margin-left: 26px; }
	
    .rks-h p{ font-size: 15px; line-height: 28px; }
    .rks-h:nth-child(1) p{line-height: 37px; height: 37px; }
    .rks-h:nth-child(2) p{line-height: 53px; height: 53px; }
    .rks-h:nth-child(3) p{line-height: 26px; height: 26px; }
    .rks-by{ margin-top: 16px; }
    .rks-bt{ margin-top: 28px; }
    .rl-conts{margin-top: 210px;}
    .rl-head{ height: 200px; }
    .sel-area{ width: 360px; margin:33px auto 0; height:60px; overflow: hidden; }
    .sel-area li{ width:140px; height:60px; margin-left: -35px; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_sprite01.png) no-repeat 0 -128px; background-size: 140px 187px; }
    .sel-area li.cur{ background-position: 0 -66px; z-index: 2; }
    /*icon*/
    .sel-area li span{ font-size: 14px; }
    .sel-area li.cur span{ width:140px; ; }
    .rds-head{ height: 220px;}
    .rds-records{ top: 220px;}
    .rds-cont{ margin-top: 306px;}
    .rds-info p{font-size: 16px;}
    .rds-info p:nth-child(2){font-size: 14px;}
}
@media screen and (min-width:400px) {    
    .rks-header{ width: 380px; height:168px; margin:20px auto 0; background:url(http://b1.hoopchina.com.cn/irun/img/group/r_rank.png) no-repeat center bottom; background-size: 380px 82px; }
    .rks-h{ height: 160px; width: 110px; }
    .rks-h:nth-child(1){ margin-left: 27px; }
    .rks-h p{ margin-top: 2px; font-size: 15px; line-height: 28px; padding: 0 5px;white-space:nowrap; overflow:hidden; 
text-overflow:ellipsis}
   .rks-h:nth-child(1) p{line-height: 38px; height: 38px; }
   .rks-h:nth-child(2) p{line-height: 59px; height: 59px; }
   .rks-h:nth-child(3) p{line-height: 25px; height: 25px; }
   
    .rks-by{ margin-top: 19px; }
    .rks-bt{ margin-top:32px; }
}
.empty01_img,.empty02_img{
    display: block;
    width: 40%;
    margin:20% auto 0;
    overflow: hidden;
}
.empty02_img{
    width: 75%;
    margin-top:300px;
}
.gray-bg,.gray-bg .rl-main{background: #f6f7fb;}